<template>
  <div class="baoqi">
    <div id="cesiumB"></div>
    <div class="aslider_s">
      <div class="asliderStyle">
        <div class="cendiv">
          <ul>
            <li>
<!--                                  <img src="../../assets/images/top1.png" alt="">-->
              <div class="oneStyle">
                <div class="headDiv">
                  <span class="shebei">流量监测</span>
                </div>
                <div class="contentDiv">
                  <div class="bingDiv">
                    <div class="leftB">
                      <p>进水流量</p>
                      <div>
                        <img src="../../assets/images/shuidi.png" alt="">
                        <div>
                            <span style="font-size: 1rem;color: #00FEB5;font-weight: 600">328.4</span>
                            <span style="font-size: 0.8rem;">(m<sup>3</sup>/L)</span>
                        </div>
                      </div>
                    </div>
                    <div class="leftB">
                      <p>混合液活性污泥浓度xv</p>
                      <div>
                        <img src="../../assets/images/tiantian.png" alt="">
                        <div>
                            <span style="font-size: 1rem;color: #00FEB5;font-weight: 600">312</span>
                            <span style="font-size: 0.8rem;">(m<sup>3</sup>/h)</span>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </li>
            <li>
              <!--                    <img src="../../assets/images/top1.png" alt="">-->
              <div class="oneStyle">
                <div class="headDiv">
                  <span class="shebei">进水五日生化需氯量浓度</span>
                </div>
                <div class="contentDiv">
                  <div class="tiaoDiv">
                    <div class="tiaoC gap-2">
                      <el-tag key="1" :type="tag1Type" effect="dark" @click="showEcharts(1)" round><span style="cursor: pointer;">月度</span></el-tag>
                      <el-tag key="2" :type="tag2Type" effect="dark" @click="showEcharts(2)" round><span style="cursor: pointer;">季度</span></el-tag>
                      <el-tag key="3" :type="tag3Type" effect="dark" @click="showEcharts(3)" round><span style="cursor: pointer;">年度</span></el-tag>
                    </div>
                    <div  class="echarts" id="bingt1"></div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <!--  <img src="../../assets/images/top1.png" alt="">-->
              <div class="oneStyle">
                <div class="headDiv">
                  <span class="shebei">曝气池出水五日生化需氯量浓度</span>
                </div>
                <div class="contentDiv">
                  <div class="tiaoDiv">
                    <div class="tiaoC gap-2">
                      <el-tag key="1" :type="tag11Type" effect="dark" @click="showEcharts1(1)" round><span style="cursor: pointer;">月度</span></el-tag>
                      <el-tag key="2" :type="tag22Type" effect="dark" @click="showEcharts1(2)" round><span style="cursor: pointer;">季度</span></el-tag>
                      <el-tag key="3" :type="tag33Type" effect="dark" @click="showEcharts1(3)" round><span style="cursor: pointer;">年度</span></el-tag>
                    </div>
                    <div  class="echarts" id="bingt11"></div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="statusDiv">

    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts';
import * as Cesium from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";
let viewer,viewer3,modelType,modelName;
export default {
  name: "baoqi",
  props: {
    pageName: String,
  },
  data() {
    return {
      dialogTableVisible:false,
      dialogjiexi:false,
      tag1Type: 'primary',
      tag2Type: 'info',
      tag3Type: 'info',
      tag11Type: 'primary',
      tag22Type: 'info',
      tag33Type: 'info',
    };
  },
  mounted() {
    console.log(this.pageName)
    this.nenghao();
    this.nenghao1();
    this.initCesiumB(this.pageName);
  },
  methods: {

    async initCesiumB(content) {
      // 清除原有的 Viewer 对象
      if (viewer3 && !viewer3.isDestroyed()) {
        viewer3.destroy();
      }

      viewer3 = new Cesium.Viewer('cesiumB',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        timeline: false,
        animation: false,
        geocoder: false,
        navigationHelpButton: false, // 隐藏右上角的问号图标
        baseLayer: null // 设置为 null，表示不显示底图
      });
      let tilesetone1;
      try {
        tilesetone1 = await Cesium.Cesium3DTileset.fromIonAssetId(content);
        viewer3.scene.primitives.add(tilesetone1);
        await viewer3.zoomTo(tilesetone1);
      } catch (error) {
        console.log(error);
      }
    },


    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    //图形解析
    jiexi(){
      this.dialogjiexi = true;
      this.jiexifunction()
    },

    //解析方法

    jiexifunction(){
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 0,
          top: '8%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false // 不显示x轴标签
          },
          axisLine: {
            // x轴线的颜色以及宽度
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          },
          axisTick: {
            show: false // x轴刻度线
          },
          splitLine: { // x轴网格线
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          }
        },
        yAxis: {
          type: 'category',
          axisTick: { show: false }, // y轴刻度线
          axisLabel: { color: '#fff' }, // y轴文字的配置
          axisLine: {
            //x轴线的颜色
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          },
          data: ['1','2','3','4','5']
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside', //显示在柱子内部
                textStyle: { color: '#fff' },
                formatter: '{c}' //单位
              }
            },
            itemStyle: {
              color: {
                colorStops:[ //柱子的渐变色
                  {
                    offset: 0,
                    color: 'rgba(5, 80, 57, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(24,86,183)' // 100% 处的颜色
                  }
                ],
                global: false
              }
            },
            barWidth: 20, //柱子的宽度
            data: [88,75,53,39,36]
          }
        ]
      }

      this.myChart = echarts.init(document.getElementById("totalecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
      this.dialogjiexi = false;
    },

    /** 查看按钮操作 */
    handleUpdate(row) {
      this.dialogTableVisible = true;
      this.kaoqinEcharts()
    },
    showEcharts(tag) {
      // 更新 el-tag 样式
      if (tag === 1) {
        this.tag1Type = 'primary';
        this.tag2Type = 'info';
        this.tag3Type = 'info';
      } else if (tag === 2) {
        this.tag1Type = 'info';
        this.tag2Type = 'primary';
        this.tag3Type = 'info';
      } else if (tag === 3) {
        this.tag1Type = 'info';
        this.tag2Type = 'info';
        this.tag3Type = 'primary';
      }
      // 在这里根据 tag 显示对应的 echarts
      this.nenghao()

      // 根据您的实际需求编写相应的代码
    },
    showEcharts1(tag) {
      // 更新 el-tag 样式
      if (tag === 1) {
        this.tag11Type = 'primary';
        this.tag22Type = 'info';
        this.tag33Type = 'info';
      } else if (tag === 2) {
        this.tag11Type = 'info';
        this.tag22Type = 'primary';
        this.tag33Type = 'info';
      } else if (tag === 3) {
        this.tag11Type = 'info';
        this.tag22Type = 'info';
        this.tag33Type = 'primary';
      }
      // 在这里根据 tag 显示对应的 echarts
      this.nenghao()

      // 根据您的实际需求编写相应的代码
    },




    // 能耗
    nenghao(){
      const option = {
        color: ['#80FFA5', '#00DDFF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // legend: {
        //   data: ['本周', '上周'],
        //   textStyle: {
        //     color: 'white' // 图例字体颜色
        //   },
        // },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top:'14%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
            axisLabel: {
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff' // 设置轴线颜色为白色
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff' // 设置轴线颜色为白色
              }
            },
            axisTick: {
              lineStyle: {
                color: '#fff' // 设置刻度线颜色为白色
              }
            }
          }
        ],
        series: [
          {
            name: '生化需氯量浓度',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              textStyle: {
                color: 'white' // 标签文本颜色
              }
            },
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          }
        ]
      };
      this.myChart1 = echarts.init(document.getElementById("bingt1"));
      this.myChart1.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart1.resize();
      });
    },
    nenghao1(){
      const option = {
        color: ['#80FFA5', '#00DDFF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // legend: {
        //   data: ['本周', '上周'],
        //   textStyle: {
        //     color: 'white' // 图例字体颜色
        //   },
        // },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top:'14%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
            axisLabel: {
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff' // 设置轴线颜色为白色
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff' // 设置轴线颜色为白色
              }
            },
            axisTick: {
              lineStyle: {
                color: '#fff' // 设置刻度线颜色为白色
              }
            }
          }
        ],
        series: [
          {
            name: '生化需氯量浓度',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          },
        ]
      };
      this.myChart1 = echarts.init(document.getElementById("bingt11"));
      this.myChart1.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart1.resize();
      });
    },


  }
};
</script>

<style scoped lang="scss">
.baoqi{
  width: 100%;
  height: 100%;
  .divImg{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 60%;
    }
  }
  :deep(.el-form-item__label){
    color: white;
  }
   :deep(.el-tabs__item) {
    font-size: 1.2rem!important;
    color: white;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
  }
   :deep(.el-tabs__item.is-active) {
    color: #1890ff;
  }
  .el-table, :deep(.el-table tr){
    background-color: transparent!important;
  }
  .el-table thead {
    background-color: transparent;
  }
   :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
    color: white;
  }
   :deep(.el-table th.el-table__cell.is-leaf),  :deep(.el-table td.el-table__cell){
    border-bottom: none;
    color: white;
  }
   :deep(.el-table tr:hover) {
    background-color: transparent !important;
  }
   :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent !important;
  }
   :deep(.el-table::before) {
    height: 0px;
  }

  .aslider_s{
    position: absolute;
    z-index: 333;
    width: 20%;
    height: 98%;
    top: 7%;
    right: 0%;
    background-image: url("../../assets/images/rightBg.png");
    background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中对齐 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */
    .asliderStyle{

      font-size: 1rem;
      height: 86%;
      display: flex;
      align-items: center;
      .cendiv{
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        ul{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          li{
            width: 100%;
            height: 33%;
            .oneStyle{
              width: 98%;
              height: 100%;
              overflow: hidden;
              .headDiv{
                width: 100%;
                height: 20%;
                background-image: url("../../assets/images/sheming.png");
                background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
                background-repeat: no-repeat; /* 不重复平铺 */
                background-position: center; /* 图片居中对齐 */
                margin: 0; /* 去除默认的外边距 */
                padding: 0; /* 去除默认的内边距 */
                position: relative;
                .shebei{
                  position: absolute;
                  top: 0.9rem;
                  left: 2.5rem;
                  font-size: 1.2rem;
                  font-weight: 600;
                  color: white;
                }
              }
              .contentDiv{
                width: 100%;
                height: 80%;
                background-image: url("../../assets/images/shenei.png");
                background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
                background-repeat: no-repeat; /* 不重复平铺 */
                background-position: center; /* 图片居中对齐 */
                margin: 0; /* 去除默认的外边距 */
                padding: 0; /* 去除默认的内边距 */
                display: flex;
                color: white;
                text-align: center;
                .colortj{
                  color: #019DFF;
                }
                >div{
                  flex: 1;
                }
                .bingDiv{
                  width: 100%;
                  height: 100%;
                  padding: 0.5rem;
                  z-index: 999;
                  display: flex;
                  .leftB{
                    flex: 1;
                  }

                }
                .tiaoDiv{
                  width: 100%;
                  height: 100%;
                  padding: 0.5rem;
                  z-index: 999;
                  div:nth-of-type(1){
                    width: 100%;
                    height: 15%;
                    display: flex;
                    justify-content: flex-end;
                  }
                  #bingt{
                    width: 100%;
                    height: 85%;
                  }
                  #bingt1{
                    width: 100%;
                    height: 85%;
                  }
                  #bingt11{
                    width: 100%;
                    height: 85%;
                  }
                  #bingt2{
                    width: 100%;
                    height: 85%;
                  }
                  #bingt22{
                    width: 100%;
                    height: 85%;
                  }
                  #bingt3{
                    width: 100%;
                    height: 85%;
                  }
                  #bingt33{
                    width: 100%;
                    height: 85%;
                  }


                }
                .backround{
                  width: 100%;
                  height: 200px;
                  :deep(.toptitle){
                    width: 100%;
                    height: 15%;
                    display: flex;
                    //background-color: gainsboro;
                    margin-top: 10px;
                    border-bottom:1px solid white;
                    background-color: transparent;
                    color:#01B0FF;
                    z-index: 999;
                    .item{
                      width: 25%;
                      text-align: center;
                    }
                  }
                  .gundong{
                    width: 100%;
                    height: 85%;
                    overflow: hidden;
                    .item{
                      width: 100%;
                      text-align: center;
                      display: flex;
                      .spanClass{
                        display: inline-block;
                        width: 25%;
                      }
                    }
                  }
                }
                :deep(.el-table), :deep(.el-table__expanded-cell){
                  background-color: transparent;
                  border: none;
                }
                /* 表格内背景颜色 */
                :deep(.el-table th),
                :deep(.el-table tr),
                :deep(.el-table td){
                  background-color: transparent;
                  color:white;
                  border: none;
                }
                .seamless-warp{
                  height: 200px;
                  overflow: hidden;
                }
                :deep(.el-table .cell){
                  text-align: center;
                }

                :deep(.el-table--border:after) {
                  height: 100%;
                  right: 0;
                  top: -1px;
                  width: 0px;
                }
                :deep(.el-table--border:before) {
                  height: 100%;
                  left: 0;
                  top: -1px;
                  width: 0px;
                }
                :deep(.el-table__border-left-patch) {
                  height: 100%;
                  top: 0;
                  width: 0px;
                }
                :deep(.el-table--border .el-table__inner-wrapper:after) {
                  height: 0px;
                  left: 0;
                  top: 0;
                  width: 100%;
                  z-index: calc(var(--el-table-index) + 2);
                }

              }
            }
          }
        }
      }
    }
  }


  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
       :deep(.el-tabs__item) {font-size: 1.2rem!important;color: white; font-family: PingFangSC, PingFang SC;font-weight: 500;}
       :deep(.el-tabs__item.is-active) {color: #1890ff;}
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      .warningContent{
        padding: 2rem 3rem;
        color: white;
        div:nth-of-type(1) span{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
        }
        div:nth-of-type(2){
          .baseSession{
            margin-top: 1.5rem;
            span{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 1.2rem;
              line-height: 2.2rem;
              color: #FFFFFF;
            }
          }
          .mt10{
             :deep(.el-table thead) {
              background-color: #01B0FF!important;
            }
          }
        }


      }

      .warningContent1{
        padding: 2rem 3rem;
        color: white;
        height: 100%;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
        }
        .wb{
          height: 80%;
          .baseSession{
            height: 100%;
            margin-top: 1.5rem;
            display: flex;
            .leftSession{
                flex: 1;
                padding: 3rem;
              p{
                line-height: 2rem;
              }
            }
            .rightSession{
                flex: 1;
                #kaoecharts{
                  width: 30rem;
                  height: 30rem;
                }
            }
          }
        }


      }
    }
  }

}


</style>

